<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单详情</title>
    <link rel="stylesheet" href="./css/order-detail.css">
    <link rel="stylesheet" href="./layui/css/layui.css">
    <link rel="stylesheet" href="./css/home.css">
    <link rel="stylesheet" href="./css/common.css">
</head>
<body>
<!-- 公共头部 -->
<div id="commonHeader"></div>

<!-- 主体内容 -->
<div class="order-detail-page">
    <div class="order-detail-header">
        <h2>订单详情</h2>
        <a href="./order.html" class="back-btn">返回订单列表</a>
    </div>
    
    <!-- 订单状态 -->
    <div class="order-status">
        <div class="status-info">
            <div class="status-text" id="statusText">订单状态</div>
            <div class="status-desc" id="statusDesc">订单描述</div>
        </div>
        <div class="status-actions" id="statusActions">
            <!-- 状态相关按钮将通过JavaScript动态生成 -->
        </div>
    </div>
    
    <!-- 订单进度 -->
    <div class="order-progress">
        <div class="progress-item" data-status="PENDING_PAYMENT">
            <div class="progress-icon">
                <i class="layui-icon layui-icon-form"></i>
            </div>
            <div class="progress-text">提交订单</div>
            <div class="progress-time" id="createTime">--</div>
        </div>
        <div class="progress-line"></div>
        <div class="progress-item" data-status="PAID">
            <div class="progress-icon">
                <i class="layui-icon layui-icon-rmb"></i>
            </div>
            <div class="progress-text">付款成功</div>
            <div class="progress-time" id="payTime">--</div>
        </div>
        <div class="progress-line"></div>
        <div class="progress-item" data-status="SHIPPED">
            <div class="progress-icon">
                <i class="layui-icon layui-icon-release"></i>
            </div>
            <div class="progress-text">商品发货</div>
            <div class="progress-time" id="shipTime">--</div>
        </div>
        <div class="progress-line"></div>
        <div class="progress-item" data-status="COMPLETED">
            <div class="progress-icon">
                <i class="layui-icon layui-icon-ok"></i>
            </div>
            <div class="progress-text">交易完成</div>
            <div class="progress-time" id="completeTime">--</div>
        </div>
    </div>
    
    <!-- 收货信息 -->
    <div class="order-section" style="display: none;">
        <div class="section-header">
            <h3>收货信息</h3>
        </div>
        <div class="section-content" id="addressInfo">
            <!-- 收货信息将通过JavaScript动态生成 -->
        </div>
    </div>
    
    <!-- 商品信息 -->
    <div class="order-section">
        <div class="section-header">
            <h3>商品信息</h3>
        </div>
        <div class="section-content">
            <table class="product-table">
                <thead>
                    <tr>
                        <th class="product-info-col">商品信息</th>
                        <th class="price-col">单价</th>
                        <th class="quantity-col">数量</th>
                        <th class="subtotal-col">小计</th>
                    </tr>
                </thead>
                <tbody id="productList">
                    <!-- 商品列表将通过JavaScript动态生成 -->
                </tbody>
            </table>
        </div>
    </div>
    
    <!-- 订单信息 -->
    <div class="order-section">
        <div class="section-header">
            <h3>订单信息</h3>
        </div>
        <div class="section-content">
            <div class="order-info-list" id="orderInfo">
                <!-- 订单信息将通过JavaScript动态生成 -->
            </div>
        </div>
    </div>
    
    <!-- 订单金额 -->
    <div class="order-section">
        <div class="section-header">
            <h3>订单金额</h3>
        </div>
        <div class="section-content">
            <div class="order-amount">
                <div class="amount-item">
                    <span class="amount-label">商品总价：</span>
                    <span class="amount-value" id="totalPrice">¥0.00</span>
                </div>
                <div class="amount-item">
                    <span class="amount-label">运费：</span>
                    <span class="amount-value" id="deliveryFee">¥0.00</span>
                </div>
                <div class="amount-item total">
                    <span class="amount-label">实付款：</span>
                    <span class="amount-value" id="finalPrice">¥0.00</span>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 公共底部 -->
<div id="commonFooter"></div>

<!-- 物流信息弹窗 -->
<div id="logisticsPopup" style="display: none;">
    <div class="logistics-container">
        <div class="logistics-header">
            <div>物流公司：<span id="logisticsCompany">--</span></div>
            <div>运单号码：<span id="logisticsNumber">--</span></div>
        </div>
        <div class="logistics-timeline" id="logisticsTimeline">
            <!-- 物流信息将通过JavaScript动态生成 -->
        </div>
    </div>
</div>

<script src="./layui/layui.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/header.js"></script>
<script src="./js/auth.js"></script>
<script src="./js/api.js"></script>
<script src="./js/common.js"></script>
<script src="./js/order-detail.js"></script>
</body>
</html>